<template>
  <div class="bx" v-if="creator">
    <!-- 创建页面 -->
    <div class="tstitle">
      <div @click="backs" class="backbtn">
        <img src="../assets/imgs/iconse/左箭头.png" alt="" />
      </div>
    </div>

    <!-- 数据遍历 -->
    <div class="bxlist">
      <div
        class="bxitem"
        v-for="(item, indexs) in creator"
        :key="item.id"
        v-show="!item.shows"
        @click="links(indexs)"
      >
        <div class="bxtitle">
          <h2>{{ item.title }}</h2>
          <p v-if="!item.flag">{{ item.text }}</p>
          <div class="box" v-if="item.flag">
            <span
              v-for="(item, ids) in item.basic[0].uers"
              :key="ids"
              v-show="!item.got"
            >
              {{ item.values }}
            </span>

            <div class="atime" v-if="item.basic[0].uers[4].got">
              <span
                v-for="(items, idsx) in item.basic[0].uers[4].values"
                :key="idsx"
                >{{ items }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btns">
      <router-link tag="div" to="/home" class="btn1">返回主页</router-link>
      <router-link tag="div" to="/manage" class="btn1">模块管理</router-link>
      <router-link tag="div" to="/personal" class="btn1">个人中心</router-link>
      <div class="btn1" @click="del">删除简历</div>
    </div>
  </div>
</template>

<script>
import { getCreatorJsonData } from "../api/creator.js";
export default {
  data() {
    return {
      property: "value",
      creator: null,
      newlist: null,
      indexs: 0,
      aaassss: ["aaa", "klkniough"],
    };
  },
  methods: {
    getnewlistFun() {
      if (localStorage.getItem("newlist")) {
        let list = localStorage.getItem("newlist");
        this.newlist = JSON.parse(list);
      }
    },
    getCreatlistFun() {
      this.creator = JSON.parse(localStorage.getItem("keys"));
    },
    backs() {
      this.$router.back();
    },
    links(index) {
      localStorage.setItem("index", index);
      // console.log("indexss",index);
      this.$router.push("transfer");
    },
    del() {
      // 1.重新实例化数组
      getCreatorJsonData().then((data) => {
        localStorage.removeItem("basic")
        this.creator = data.creatorlist;
        if (this.creator) {
          // 取出来用JSON.parse（）
          // 写入用JSON.stringify()
          let aa = JSON.stringify(this.creator);
          window.localStorage.setItem("keys", aa);
          // console.log("fristrun",aa);
        }
      });

      //2.将子数组置为空
      localStorage.setItem("newlist", "");
      localStorage.removeItem("oniu");
      this.$router.push("home");
    },
  },
  created() {
    this.getCreatlistFun();
    this.getnewlistFun();
  },
  watch: {
    creator: function () {
      this.getnewlistFun();
    },
  },
};
</script>

<style lang="scss" scoped>
.bx {
  /*设置背景色*/
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
  background-color: #f5f6fa;

  /*返回标签*/
  .tstitle {
    height: 50px;
    line-height: 50px;
    // display: flex;
    right: 0px;
    left: 0px;
    top: 0px;
    margin: 0 auto;
    position: fixed;
    align-items: center;
    background-color: #f5f6fa;
    .backbtn {
      height: 20px;
      line-height: 20px;
      margin-left: 15px;
      margin-top: 15px;
      img {
        height: 100%;
        display: block;
      }
    }
  }

  /*信息卡片*/
  .bxlist {
    padding-bottom: 150px;
    padding-top: 80px;
    .bxitem {
      padding: 15px;
      padding-top: 0px;
      margin: 0px 20px;
      margin-bottom: 30px;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0px 0px 6px 2px #eee;
      .bxtitle {
        h2 {
          height: 80px;
          font-size: 20px;
          line-height: 80px;
          font-weight: 800;
        }
        p {
          color: #999;
          line-height: 20px;
        }
        .box {
          span {
            display: inline-block;
            font-size: 16px;
            margin-right: 20px;
          }
          .atime {
            span {
              display: inline-block;
              font-size: 16px;
              // margin-right: 20px;
              &::after {
                content: "——";
                display: inline-block;
                font-size: 12px;
                margin-left: 20px;
              }
              &:nth-last-child(1)::after {
                content: "";
                display: inline-block;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }

  /*底部按钮*/
  .btns {
    width: 80%;
    height: 90px;
    background-color: #5c5e6b;
    position: fixed;
    display: flex;
    bottom: 30px;
    right: 0px;
    left: 0px;
    margin: 0 auto;
    border-radius: 20px;
    justify-content: space-around;
    box-shadow: 0px 0px 10px 7px #ccc;
    .btn1 {
      // width: 20%;
      height: 100%;
      line-height: 90px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      // transform: scale(0.8);
    }
  }
}
</style>